#references {
    height: auto; /* Höhe automatisch anpassen */
    text-align: center;
    padding: 50px 0px;
}

#references h1 {
    margin-top: 50px;
    font-size: 45px;
    margin-bottom: 50px;
    color: #CF272F;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(12, 1fr); /* Erstellt zwölf Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 1800px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 100px;
}

.gallery__item {
    display: block; /* a-Elemente als Block, um die volle Zelle zu füllen */
    width: 100%; /* Breite auf 100% der Zelle setzen */
    height: 100%; /* Höhe auf 100% der Zelle setzen */
    border-radius: 15px;
    transition: .3s ease;
}

.gallery__item:hover {
    transform: scale(0.97);
}

.gallery__item img {
    width: 593.32px;
    height: 439.67px;
    object-fit: cover; /* Bild anpassen und zuschneiden, um das Seitenverhältnis zu erhalten */
    border-radius: 15px; /* Stellen Sie sicher, dass das Bild auch abgerundete Ecken hat */
    transition: opacity 0.3s ease; /* Korrektur für die Transition von opacity */
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.2);
}




.gallery__item img:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.buttonMore {
    padding-left: 140px;
    padding-right: 140px;
    padding-top: 20px;
    padding-bottom: 20px;
}

@media screen and (max-width: 1900px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
        grid-template-rows: repeat(12, 1fr); /* Erstellt zwölf Zeilen mit gleicher Höhe */
        width: 1400px; /* Maximale Breite des Grids, kann angepasst werden */
    }


    .gallery__item img {
        width: 460px;
        height: 340.86px;
    }


}

@media screen and (max-width: 1430px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
        grid-template-rows: repeat(12, 1fr); /* Erstellt zwölf Zeilen mit gleicher Höhe */
        width: 1200px; /* Maximale Breite des Grids, kann angepasst werden */
    }

    .gallery__item img {
        width: 393.32px;
        height: 291.45px;
    }
}

@media screen and (max-width: 1230px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr); /* Erstellt zwei Spalten mit gleicher Breite */
        grid-template-rows: repeat(18, 1fr); /* Erstellt achtzehn Zeilen mit gleicher Höhe */
        width: 1000px; /* Maximale Breite des Grids, kann angepasst werden */
    }

    .gallery__item img {
        width: 495px;
        height: 366.8px;
    }
}

@media screen and (max-width: 1030px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr); /* Erstellt zwei Spalten mit gleicher Breite */
        grid-template-rows: repeat(18, 1fr); /* Erstellt achtzehn Zeilen mit gleicher Höhe */
        width: 800px; /* Maximale Breite des Grids, kann angepasst werden */
    }

    .gallery__item img {
        width: 395px;
        height: 297.7px;
    }
}

@media screen and (max-width: 860px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr); /* Erstellt zwei Spalten mit gleicher Breite */
        grid-template-rows: repeat(18, 1fr); /* Erstellt achtzehn Zeilen mit gleicher Höhe */
        width: 600px; /* Maximale Breite des Grids, kann angepasst werden */
    }

    .gallery__item img {
        width: 286.15px;
        height: 212.04px;
    }
}


/** FÜR MOBILE GERÄTE OPTIMIERTE ANSICHT DER BILDER **/

/** BILDER WERDEN HORIZONTALER DAHRGESTELLT UM HOCHKANT BZW: SMARTPHONE SCREENS AUSZUNUTZEN **/

/** hover: none: Das Gerät unterstützt keine Hover-Interaktionen, was bei Touch-Geräten
    üblich ist.

    pointer: coarse: Das Gerät hat einen „groben“ Zeiger, also einen Finger oder einen Stylus,
    anstelle einer Maus. **/


@media (hover: none) and (pointer: coarse) {
    /* Stile für Touch-Geräte */

    .gallery__item img {
        height: 100%;
    }
}

@media screen and (max-width: 660px) {
    .gallery {
        grid-template-columns: repeat(1, 1fr); /* Erstellt eine Spalte */
        grid-template-rows: repeat(36, 1fr); /* Erstellt sechsunddreißig Zeilen mit gleicher Höhe */
        width: 400px; /* Maximale Breite des Grids, kann angepasst werden */
    }

    .gallery__item img {
        width: 388px;
        height: 287.51px;
    }
}

@media screen and (max-width: 460px) {
    .gallery {
        grid-template-columns: repeat(1, 1fr); /* Erstellt eine Spalte */
        grid-template-rows: repeat(36, 1fr); /* Erstellt sechsunddreißig Zeilen mit gleicher Höhe */
        width: 350px; /* Maximale Breite des Grids, kann angepasst werden */
    }

    .gallery__item img {
        width: 339.5px;
        height: 251.58px;
    }
}

@media screen and (max-width: 410px) {
    .gallery {
        grid-template-columns: repeat(1, 1fr); /* Erstellt eine Spalte */
        grid-template-rows: repeat(36, 1fr); /* Erstellt sechsunddreißig Zeilen mit gleicher Höhe */
        width: 300px; /* Maximale Breite des Grids, kann angepasst werden */
    }

    .gallery__item img {
        width: 300px;
        height: 222.31px;
    }
}